<template>
    <div style="padding-bottom: 1.4rem">
			<!-- <div v-if="chenload"> -->
				<div class="search" @click="search()">
					<img src="../../../src/assets/img/shouye/sousuo.png" alt="">
					搜索课程
				</div>
				<ly-tab v-model="selectedId" :items="items" :options="options"   @change="handleChange" v-if="bol" :class="searchBarFixed==true?'lyly':''" id="Tab" style="color: #000;z-index: 99999">
				</ly-tab>

				<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmore">
					<div style="width: 92%;margin: auto;padding-bottom: 0.2rem">
						<div class="t" @click="ke(item)" v-for="(item,index) in tuijian">
							<img :src="img+item.thumb" alt="" class="pp">
							<img src="../../../src/assets/img/xianshimianfei.png" alt="" style="position: absolute;left: 0;top: 0;width: 0.5rem;height: auto" v-if="item.xprice>0&&item.price==0">
							<img src="../../../src/assets/img/xianshitehui.png" alt="" style="position: absolute;left: 0;top: 0;width: 0.5rem;height: auto" v-if="item.xprice>0&&item.price>0">
							<div class="middle">
								<p>{{item.name}}</p>
								<p class="s">
									<img src="../../../src/assets/img/ren.png" alt="">
									<span>{{item.hits}}人</span>
									<span class="a1" v-if="item.price == 0">免费</span>
									<span class="a" v-else>￥{{item.price}}</span>
									<span v-if="item.price !=0">￥{{item.xprice}}</span>
								</p>
							</div>
						</div>
					</div>
        </mt-loadmore>
      <!-- </div> -->
			<!-- <div class="loadmore" v-else>
				<img src="static/img/load.gif" alt="">
			</div> -->

      <!--<Homepage :idx="1"></Homepage>-->
    </div>
</template>

<script>
  // import Homepage from '@/components/home/Homepage'
    export default {
        name: "Gkecheng",
      // components:{
      //   Homepage
      // },
      data(){
          return{
						// chenload:false,
            selectedId: 0,
            items: [
              {name:'全部',recommand:0}
            ],
            options: {
              activeColor: '#0287FF',
              labelKey:'name'
              // 可在这里指定labelKey为你数据里文字对应的字段名
            },
            tuijian:[],
            img:this.$store.state.img,
            bol:false,
            page:1,
            allLoaded:false,
            searchBarFixed:false
          }
      },
      methods:{
        loadTop(){
          // var that = this;

            var data = {
              channel: sessionStorage.getItem('id'),
              recommand: sessionStorage.getItem('recommand'), //是否要推荐列表， 非必须
              page:1,
              pageSize:"20",
              version: 'v1',
            };
            console.log(data)
            this.axios.post(this.$store.state.url + 'Api_v1/Course/getCourse',data).then(res=>{
              if (res.data.errcode == 0){
                // console.log(res.data.data.course)
                this.tuijian = res.data.data.course;
                this.$refs.loadmore.onTopLoaded();
              }
            });


          // load more data
        },
        loadBottom() {
          // load more data
          this.allLoaded = true;// if all data are loaded

          this.page++;
          var that = this;

            var data = {
              channel: sessionStorage.getItem('id'),
              recommand: sessionStorage.getItem('recommand'), //是否要推荐列表， 非必须
              page:that.page,
              pageSize:"20",
              version: 'v1',
            };
            console.log(data)
            this.axios.post(this.$store.state.url + 'Api_v1/Course/getCourse',data).then(res=>{
              if (res.data.errcode == 0){
                // console.log(res.data.data.course)
                for (var i = 0;i< res.data.data.course.length;i++) {
                  this.tuijian.push(res.data.data.course[i])
                }
                this.$refs.loadmore.onBottomLoaded();
                this.allLoaded = false;
              }
            });


        },
        ke(item){
          this.$router.push({
            path:'/gkx',
            query:{
              id:item.id
            }
          })
        },
        search(){
          this.$router.push({
            path:'/search'
          })
        },
        handleChange (item, index) {
          this.page = 1;
          console.log(item, index)
          if (item.name =='全部'){
            sessionStorage.removeItem('id');
            sessionStorage.setItem('recommand','0');
            var data = {
              version:'v1',
              recommand: "0", //是否要推荐列表， 非必须
              page:"1", //第几页数据 不传默认第一页
              pageSize:"20" //每页多少 不传默认20
            }
            this.axios.post(this.$store.state.url + 'Api_v1/Course/getCourse',data).then(res=> {
              console.log(res.data)
              if (res.data.errcode == 0){
                this.tuijian = res.data.data.course
              }
            })
          } else {
            sessionStorage.setItem('id',item.id);
            sessionStorage.removeItem('recommand');
            var data = {
              channel: item.id,
              version:'v1',
              page:"1", //第几页数据 不传默认第一页
              pageSize:"20" //每页多少 不传默认20
            }
            this.axios.post(this.$store.state.url + 'Api_v1/Course/getCourse',data).then(res=> {
              console.log(res.data)
              if (res.data.errcode == 0){
                this.tuijian = res.data.data.course
              }
            })
          }
        },
        handleScroll () {
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          // var offsetTop = document.querySelector('#Tab').offsetTop;
          if (scrollTop > 40) {
            this.searchBarFixed = true
          } else{
            this.searchBarFixed = false
          }
        },
      },
      mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
          var data = {
            version:'v1'
          }
        this.axios.post(this.$store.state.url + 'Api_v1/Course/getChannel',data).then(res=> {
          console.log(res.data)
            if (res.data.errcode == 0){
              // this.items = res.data.data.channel
              for (var i = 0;i <res.data.data.channel.length;i++){
                this.items.push(res.data.data.channel[i])
              }
              this.bol = true
            }
           // for (var i = 0;i < res.data.data.channel.length;i++){
           //  var a = {}
           //   a.label = res.data.data.channel[i].name
           //   this.items.push(a);
           // }

        })
        sessionStorage.setItem('recommand','0');
        var data = {
            version:'v1',
          recommand: "0", //是否要推荐列表， 非必须
          page:"1", //第几页数据 不传默认第一页
          pageSize:"20" //每页多少 不传默认20
        }
        this.axios.post(this.$store.state.url + 'Api_v1/Course/getCourse',data).then(res=> {
          console.log(res.data)
          if (res.data.errcode == 0){
            this.tuijian = res.data.data.course
          }
        })

        //滚动到固定位置停下
        window.addEventListener('scroll', this.handleScroll)
      }
    }
</script>

<style scoped>
  /*.mint-loadmore{*/
    /*padding-bottom: 10rem;*/
    /*!*box-sizing: border-box;*!*/
  /*}*/
  .lyly{
    position: fixed;
    top:0rem;
    background: #ffffff;
   
  }
  .search{
    width: 92%;
    margin: auto;
    height: 0.56rem;
    margin-top: 0.16rem;
    background:rgba(240,240,240,1);
    border:0.01rem solid rgba(237,237,237,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search img{
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.05rem;
  }
  .img{
    width: 100%;
    height: 3.3rem;
    margin-top: 0.16rem;
  }
  .t{
    margin-top: 0.3rem;
    position: relative;
  }
  .pp{
    width: 2.1rem;
    height: 1.18rem;
    border-radius:0.08rem;
    float: left;
  }
  .middle{
    margin-left: 2.3rem;
    height: 1.18rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .middle p{
    width: 100%;
  }
  .middle p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .s span{
    vertical-align: middle;
  }
  .s img{
    width: 0.24rem;
    height: 0.2rem;
    vertical-align: middle;
    margin-top: 0.03rem;
  }
  .s span:nth-child(2){
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    display: inline-block;
    margin-top: 0.03rem;
  }
  .s span:nth-child(4){
    font-size:0.24rem;
    text-decoration:line-through;
    color:rgba(194,201,211,1);
    float: right;
    margin-right: 0.2rem;
    margin-top: 0.03rem;
    /*margin-top: 0.03rem;*/
  }
  .a{
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    float: right;


  }
  .a1{
    font-size:0.3rem;
    font-weight:bold;
    color:#0287FF;
    float: right;
  }
</style>
